<!-- 首页 -->
<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view='scrollIntoIndex'>
			<view :id="'top'+index" class="scroll-item" v-for="(item,index) in topBar" :key="index"
				@tap="changeTab(index)">
				<text :class='topBarIndex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>

		<swiper @change='onChangeTab' :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			<swiper-item v-for='(item,index) in newTopBar' :key='index'>
				<scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'" @scrolltolower='loadMore(index)'>
					<block v-if='item.data.length > 0 '>
					
						<block v-for='(k,i) in item.data' :key='i'>
							<!-- 推荐模块 -->
							<IndexSwiper v-if='k.type==="swiperList"' :dataList='k.data'></IndexSwiper>
							<template v-if='k.type==="recommendList"'>
								<Card cardTitle='今日推荐'></Card>
								<Recommend :dataList='k.data'></Recommend>
								<Card cardTitle='猜你喜欢'></Card>
							</template>
							<!-- 手机、男装... -->
							<Banner v-if='k.type==="bannerList"' :dataList='k.imgUrl'></Banner>
							<template v-if="k.type==='iconsList'">
								<Icons :dataList='k.data'></Icons>
								<Card cardTitle='热销爆品'></Card>
							</template>
							<template v-if="k.type==='hotList'">
								<Hot :dataList='k.data'></Hot>
								<Card cardTitle='推荐店铺'></Card>
							</template>
							<template v-if="k.type==='shopList'">
								<Shop :dataList='k.data'></Shop>
								<Card cardTitle='为您推荐'></Card>
							</template>
							<CommodityList v-if='k.type==="commodityList"' :dataList='k.data'></CommodityList>
						</block>
					</block>
					<view class="load-text f-color">
						{{item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<Tabbar cureentPage='index'></Tabbar>
	</view>
</template>
<script setup>
	import {onReady,onLoad,onNavigationBarButtonTap} from "@dcloudio/uni-app"
	import Tabbar from '@/components/common/Tabbar.vue'
	import $http from '@/common/api/request.js'
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	import {ref,reactive} from "vue"
	
	// 用来定义导航栏scroll-into-view的id
	const scrollIntoIndex = ref('top0')
	// 内容块的高度值
	const clentHeight = ref(0);
	// 第一选择导航栏的目标
	const topBarIndex = ref(0)
	// 定义导航栏数据
	const topBar = ref([])
	//承载导航栏数据
	const newTopBar = ref([])
	// 点击导航栏进行切换
	const changeTab = (index) => {
		if (topBarIndex.value === index) {
			return;
		} else {
			topBarIndex.value = index;
			scrollIntoIndex.value = 'top' + index;
			// 给每一次滑动赋值first
			if(newTopBar.value[topBarIndex.value].load==='first'){
				addData();
			}
		}
	}
	// 定义滑动的内容随着导航栏切换
	const onChangeTab = (e) => {
		changeTab(e.detail.current);
	}
	onLoad(() => {
		__init();
	})
	// 获取其内容高度
	onReady(() => {
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value = res.windowHeight-getClientHeight();
			}
		})
	})
	onNavigationBarButtonTap((e)=>{
		if(e.index == 0){
			uni.navigateTo({
				url:"/pages/search/search"
			})
		}
	})
	// 发送请求获取数据
	const __init = () => {
		$http.request({
			url:"/index_list/data"
		}).then((res)=>{
			topBar.value = res.topBar;
			newTopBar.value = initData(res);
		}).catch(()=>{
			uni.showToast({
				title:"请求失败",
				icon:"error"
			})
		})
	}
	// 添加数据
	const initData = (res) => {
		let arr = [];
		for (let i = 0; i < topBar.value.length; i++) {
			let obj = {
				data: [],
				// 给数据打上一个标记,避免划回来时候重复发送请求
				load:"first",
				loadText:"上拉加载更多..."
			}
			//获取首次数据
			if (i == 0) {
				obj.data = res.data;
			}
			arr.push(obj);
		}
		return arr;
	}
	// 获取可视区域高度(兼容android和ios与微信小程序顶栏高度的不同)
	const getClientHeight = () => {
		const res = uni.getSystemInfoSync();
		const system = res.platform;
		if (system === 'ios') {
			return 44 + res.statusBarHeight;
		} else if (system === 'android') {
			return 48 + res.statusBarHeight;
		} else {
			return 0;
		}
	}
	const addData = (callback)=>{
		// 得到索引
		let index = topBarIndex.value;
		// 得到id
		let id = topBar.value[index].id
		let page = Math.ceil(newTopBar.value[index].data.length/5)+1;
		// 请求数据
		$http.request({
			url:`/index_list/${id}/data/${page}`
		}).then((res)=>{
			newTopBar.value[index].data = [...newTopBar.value[index].data,...res]
		}).catch(()=>{
			uni.showToast({
				title:"请求失败",
				icon:"error"
			})
		})
		// 请求结束,改变其状态
		newTopBar.value[index].load = 'last'
		if(typeof callback === 'function'){
			callback();
		}
	}
	// 上拉加载更多
	const loadMore = (index)=>{
		newTopBar.value[index].loadText='正在加载中...'
		addData(()=>{
			newTopBar.value[index].loadText='上拉加载更多...'
		})
	}
</script>
<style>
	.uni-app--showtabbar uni-page-wrapper::after {
		display: none;
	}
	.scroll-content {
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}

	.scroll-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 36rpx;
	}

	.f-active-color {
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49BDFB;
	}
	.load-text{
		border-top: 2rpx solid #636263;
		line-height: 60rpx;
		text-align: center;
	}
</style>
